import './style.css';
import { uuid } from '../../utils';
import mitt from 'mitt';
import backImg from '../../../assets/images/back.png'


export class WebView {
    constructor(opts) {
        this.opts=opts;
        this.id='webview_'+uuid();
        this.el=document.createElement('div');
        this.el.classList.add('wx-native-view');

        //pageframe模板页面
        this.el.innerHTML=`
        <div class="wx-native-webview">
            <!-- 导航区域 -->
            <div class="wx-native-webview__navigation">
                <div class="wx-native-webview__navigation-content">
                    <!-- 返回按钮 -->
                    <div style="width:20px;">
                        <div class="wx-native-webview__navigation-left-btn">
                            <!-- <img src="../assets/images/logo.png" /> -->
                            <img src="${backImg}" />
                        </div>
                    </div>
                    <!-- 页面标题 -->
                    <h3 class="wx-native-webview__navigation-title"></h3>
                    <!-- 右侧按钮 -->
                    <div style="width:20px;"></div>
                </div>
            </div>

            <!-- iframe -->
            <div class="wx-native-webview__body">
                <div class="wx-native-webview__root">
                    <iframe class="wx-native-webview__window" src="http://127.0.0.1:3300/page_frame/" frameborder="0"></iframe>
                    <!-- <iframe class="wx-native-webview__window" src="http://local.mp.cn/jsthread/pageframe/" frameborder="0"></iframe> -->
                    <!-- <iframe class="wx-native-webview__window" src="./pageframe/index.html" frameborder="0"></iframe> -->
                </div>
            </div>
        </div>
        `;

        this.setInitalStyle();
        this.iframe=this.el.querySelector('.wx-native-webview__window')
        this.iframe.name=this.id
        this.event=mitt();
        //返回按钮绑定点击事件
        this.bindBackEvent();



    }
    async init(callback){
        await this.frameLoaded();
        //移除监听事件
        window.removeEventListener('message', ()=> {
            
        });
        window.addEventListener('message',(e)=>{
            console.log("来自iframe的消息：",e)
            // console.log("原生层接收来自ui线程中：",e)
            const msg=e.data;
            this.event.emit("message",msg)
        });
        
        /* const iframeWindow = window.frames[this.iframe.name];
        console.log("iframeWindow1:",this.iframe.name)
        console.log("iframeWindow2:",iframeWindow)

		iframeWindow.JSBridge.onReceiveUIMessage = (msg) => {
			this.event.emit('message', msg);
		}; */
        callback && callback();
    }
    //返回按钮绑定点击事件
    bindBackEvent(){
        const backBar=this.el.querySelector('.wx-native-webview__navigation-left-btn');
        if(backBar){
            backBar.onclick=()=>{
                this.parent.parent.navigateBack();
            }
        }
    }
    //frame同步加载
    frameLoaded(){
        return new Promise((resolve)=>{
            this.iframe.onload=()=>{
                resolve();
            }
        })
    }
    addEventListener(type,handler){
        this.event.on(type,handler);
    }
    postMessage(msg){
        const iframeWindow=window.frames[this.iframe.name];
        //不是同源跨域所以用的postMessage
        // iframeWindow.JSBridge.onReceiveNativeMessage(msg);
        iframeWindow.postMessage(msg,'*');
    }
    //webView初始时设置样式
    setInitalStyle(){
        const config=this.opts.configInfo;
        const webview=this.el.querySelector('.wx-native-webview');
        const pageName=this.el.querySelector('.wx-native-webview__navigation-title');
        const navigationBar=this.el.querySelector('.wx-native-webview__navigation');
        //左侧返回按钮
        const leftBar=this.el.querySelector('.wx-native-webview__navigation-left-btn');
        const root=this.el.querySelector('.wx-native-webview__root');

        if(this.opts.isRoot){
            leftBar.style.display='none';
        }else{
            leftBar.style.display='block';
        }

        if(config.navigationBarTextStyle==='white'){
            navigationBar.classList.add('wx-native-webview__navigation-white')
        }else{
            navigationBar.classList.add('wx-native-webview__navigation-black')
        }
        if(config.navigationStyle==='custom'){
            webview.classList.add('wx-native-webview--custom-nav')
        }

        root.computedStyleMap.backgroundColor=config.backgroundColor;
        navigationBar.computedStyleMap.backgroundColor=config.navigationBarBackgroundColor;
        pageName.innerText=config.navigationBarTitleText;
    }
}